<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SVG Loaders</title>

<style type="text/css">
html {
	height: 100%;
	background: #3023ae;
	background: -moz-linear-gradient(-45deg,  #3023ae 0%, #c86dd7 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3023ae), color-stop(100%,#c86dd7));
	background: -webkit-linear-gradient(-45deg,  #3023ae 0%,#c86dd7 100%);
	background: -o-linear-gradient(-45deg,  #3023ae 0%,#c86dd7 100%);
	background: -ms-linear-gradient(-45deg,  #3023ae 0%,#c86dd7 100%);
	background: linear-gradient(135deg,  #3023ae 0%,#c86dd7 100%);
	background-attachment: fixed;
}
body {
	font-family: "Open Sans";
	font-weight: 300;
}
a {
	color: #fff;
}

.demo {
	background: #fff;
	width: 720px;
	margin: auto;
	margin-top: 60px;
	list-style: none;
	padding: 0;
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.37);
	box-shadow:      0px 0px 4px 0px rgba(0,0,0,0.37);
}
.demo li {
	width: 180px;
	height: 180px;
	line-height: 176px;
	text-align: center;
	float: left;
	background-repeat: no-repeat;
	background-position: center;
}
.demo li img {
	vertical-align: middle;
}
.demo li:nth-child(1) {
	background-color: #1ABC9C;
}
.demo li:nth-child(2) {
	background-color: #34495E;
}
.demo li:nth-child(3) {
	background-color: #F39C12;
}
.demo li:nth-child(4) {
	background-color: #9B59B6;
}
.demo li:nth-child(5) {
	background-color: #3498DB;
}
.demo li:nth-child(6) {
	background-color: #E74C3C;
}
.demo li:nth-child(7) {
	background-color: #2ECC71;
}
.demo li:nth-child(8) {
	background-color: #2C3E50;
}
.demo li:nth-child(9) {
	background-color: #F1C40F;
}
.demo li:nth-child(10) {
	background-color: #8E44AD;
}
.demo li:nth-child(11) {
	background-color: #2980B9;
}
.demo li:nth-child(12) {
	background-color: #E74C3C;
}
</style>

</head>

<body>

<ul class="demo">
	<li><img src="svg-loaders/audio.svg" width="40" alt=""></li>
	<li><img src="svg-loaders/rings.svg" width="60" alt=""></li>
	<li><img src="svg-loaders/grid.svg" width="40" alt=""></li>
	<li><img src="svg-loaders/hearts.svg" width="80" alt=""></li>
	<li><img src="svg-loaders/oval.svg" width="50" alt=""></li>
	<li><img src="svg-loaders/three-dots.svg" width="60" alt=""></li>
	<li><img src="svg-loaders/spinning-circles.svg" width="50" alt=""></li>
	<li><img src="svg-loaders/puff.svg" width="50" alt=""></li>
	<li><img src="svg-loaders/circles.svg" width="50" alt=""></li>
	<li><img src="svg-loaders/tail-spin.svg" width="50" alt=""></li>
	<li><img src="svg-loaders/bars.svg" width="40" alt=""></li>
	<li><img src="svg-loaders/ball-triangle.svg" width="50" alt=""></li>
	<div style="clear: both"></div>
</ul>

</body>
</html>
